/**
 * 创元汇 - WebName
 * https://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    StatusBar
} from 'react-native'
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, consoleLog } from '../../utils/utilsToast'

export default class WebName extends Component {

    constructor(props) {
        super(props);
        const { params } = this.props.navigation.state;
        this.state =  {
            url: params.link,
            title: params.title,
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount(){
        this.loadNetData();
    }

    onBack = () => {
        this.props.navigation.goBack();
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadNetData = () => {
        console.log(this.state.url[0]);
    }

    render(){
        let navigationBar = {
            backgroundColor: '#fff',
            borderBottomColor: '#f2f2f2',
            borderBottomWidth: 1,
        };
        return (
            <View style={styles.container}>
                <NavigationBar
                    title = {this.state.title}
                    style = {navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                />
                <StatusBar
                    animated = {true}
                    hidden = {false}
                    backgroundColor = {'transparent'}
                    translucent = {true}
                    barStyle = {'dark-content'}
                />
                <ScrollView 
                    scrollsToTop={true} 
                    ref={(scrollView) => { _scrollView = scrollView; }} >
                    {this.ImageList(this.state.url)}
                </ScrollView>

                <View style={styles.hetongico}>
                    <TouchableOpacity onPress={() => { _scrollView.scrollTo({y: 0}); }} style={styles.fanhuidingbu}>
                        <Image source={require('../../assets/images/icons/fanhuidingbu.png')} style={styles.fanhuidingbuico} />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => { _scrollView.scrollToEnd({animated: true}); }} style={styles.yijiandaodi}>
                        <Image source={require('../../assets/images/icons/yijiandaodi.png')} style={styles.yijiandaodiico} />
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

    ImageList = (data) => {
        let imageData = [];
        console.log(data)
        if(data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                console.log(data[i])
                // let thetitle = data[i].title;
                // let theid = data[i].id;
                let imageItem = (
                    <Image key={i} source={{uri: data[i]}} style={styles.imgitem} />
                )
                imageData.push(imageItem);
            }
            return imageData;
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: GlobalStyles.bgColor,
    },
    imgitem: {
        width: GlobalStyles.width,
        height: GlobalStyles.width*1169/827,
    },
    hetongico: {
        backgroundColor: 'transparent',
        position: 'absolute',
        bottom: 30,
        right: 15
    },
    fanhuidingbu: {
        backgroundColor: 'transparent',
        marginBottom: 10,
    },
    fanhuidingbuico: {
        backgroundColor: 'transparent',
        width: 40,
        height: 40,
    },
    yijiandaodi: {
        backgroundColor: 'transparent',

    },
    yijiandaodiico: {
        backgroundColor: 'transparent',
        width: 40,
        height: 40,
    },
});
